<template>
	<el-container>
		<el-header>
			<el-button type="primary" @click="add_bt(0)">添加</el-button>
		</el-header>
		<el-main>
			<el-table :data="list" border style="width: 100%" :stripe="true">
				<el-table-column label="封面">
					　　<template slot-scope="scope">
						<el-image v-if="scope.row.img" class="head_pic" :src="getimg+scope.row.img">
						</el-image>
						　　
					</template>
				</el-table-column>
			 <el-table-column prop="title" label="名称">
				</el-table-column>

				<el-table-column prop="through" label="浏览">
				</el-table-column>

				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
						<el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-main>
		<el-footer>
			<el-pagination style="margin-top: 50px;" background layout="prev, pager, next" :total="total"
				:page-size="size" @current-change="jump_page" :current-page="currPage">
			</el-pagination>
		</el-footer>

	</el-container>






</template>
<script>
	import {
		Api_url
	} from '../../api/config.js'

	export default {
		data() {
			return {
				form: {
					name: ''
				},
				goods: [],
				title: ['添加', '编辑'],
				state: ['下架', '在售', '售出'],
				total: 0,
				formLabelWidth: '120px',
				size: 6,
				getimg: Api_url,
				currPage: 1,
				list: [],
				dialogVisible: false,
				drawer: false,
				type: 0, //0添加1编辑

			}
		},
		mounted() {
			this.get_all()
		},
		methods: {
			get_all() {
				this.list = []
				const loading = this.$loading({
					lock: true,
					text: '加载中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$model.get("/cms/article/get?num=" + this.size + "&page=" + this.currPage).then(res => {
					if (res.code == 200) {
						this.list = res.data
						this.total = res.total
					}
					loading.close();
				})
			},
			edit(item){
				localStorage.setItem("edit_article", JSON.stringify(item))
				this.$router.push({
					path: '/article/add'
				})
			},

			edit_bt(item) {
				this.form = item
				this.type = 1
				this.dialogVisible = true
			},
			get_img(e) {
				this.img_list = e
				this.form.img = e.id
				this.drawer = false
			},
			back(e) {
				this.drawer = false
			},
			//分页跳转
			jump_page(e) {
				this.currPage = e
				this.get_all()

			},
			del(id) {
				this.$confirm('确认删除？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$model.put("/cms/article/del?id=" + id).then(res => {
						if (res.code == 200) {
							this.$message({
								message: '已删除',
								type: 'success'
							});

							this.currPage = 1
							this.list = []
							this.get_all()
						}
					})

				}).catch((error) => {
					console.log(error)
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			//添加事件
			add_bt() {
				this.$router.push({
					path: '/article/add'
				})
			},

		},
		created() {},
		beforeUpdate() {},
		// 挂载前状态(里面是操作)
		beforeMount() {}
	}
</script>
<style>
	.head_pic {
		width: 120px;
		height: 120px;
	}

	.picA {
		width: 148px;
		height: 148px;
		background-color: #FBFDFF;
		border: 1px dashed #C0CCDA;
		border-radius: 6px;
		box-sizing: border-box;
		vertical-align: top;
		text-align: center;
		margin: 6px;
	}

	.img {
		width: 144px;
		height: 144px;
		border: 1px solid #BFBFBF;
		border-radius: 3px;
	}
</style>
